<!--
 * @Date: 2023-06-23 21:58:15
 * @LastEditTime: 2023-10-11 17:06:58
 * 介绍:
-->
<script lang="ts" setup>
import { ApiWkTaskList, ApiWkMyOrderTaskList } from "@@/api/wk/list";
import router from "@@/router";
import { _require } from "@@/utils/tools";
import { fixedDecimals, omitText } from "@@/utils/tools/format";
import dayjs from "dayjs";
import { WkTaskStatus, wkTaskStatus } from "@@/enum/globalEnum";
import omit from "lodash/omit";
import { useCurrentDate } from "@@/hooks/toolsHooks";
import { getCountdown } from "@@/utils/tools/date";

const { t } = useI18n();
const { currentDate } = useCurrentDate();

const props = defineProps<{
  item: ApiWkTaskList.DataItem;
  watchword?: string;
  orderTask?: ApiWkMyOrderTaskList.DataItem;
  brief?: boolean;
}>();
//使其丢失响应式，必须重新渲染组件更新watchword
const watchword = props.watchword;
function toDetails(item: ApiWkTaskList.DataItem) {
  router.push({
    name: "wk-taskDetails",
    query: {
      json: JSON.stringify(item),
      watchword,
      orderTask: JSON.stringify(omit(props.orderTask, ["task"])),
    },
  });
}

const countdown = computed(() => {
  const res = getCountdown(
    currentDate.value,
    dayjs(props.item.auto_finish_time)
  );
  if (res.diffTime < 0) return t("yiChaoShi");
  return `${res.H}:${res.m}:${res.s}`;
});
const showCountdown = computed(
  () => props.item.status === WkTaskStatus.ORDER_ACCEPT
);
</script>

<template>
  <Ccard
    @click="toDetails(props.item)"
    :key="props.item.id"
    class="list-item"
    :class="{
      'list-item__notBrief': !props.brief,
      'list-item__brief': props.brief,
    }"
  >
    <div v-if="!props.brief">
      <BwkLevel :level="props.item.user.level" class="BwkLevel"></BwkLevel>
      <div class="flex-J-SB">
        <h3>{{ omitText(props.item.user.address) }}</h3>
        <CstateTag
          radius="var(--R-sm)"
          :enum="wkTaskStatus"
          :value="props.item.status"
        />
      </div>
      <div class="C-T3 MT-xs">
        {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm:ss") }}
      </div>
      <div
        v-if="showCountdown"
        class="flex-A-C B-M1-O2 C-M1 PD-xs PL-sm PR-sm MT-sm R-xs"
      >
        <Cicon name="icon-shijian" />
        <div class="ML-xs">{{ $t("daoJiShi") }}</div>
        <div class="ML-auto">{{ countdown }}</div>
      </div>
      <Ccard class="flex-A-C PT-xs PB-xs MT-md">
        <div>{{ item.introduction }}</div>
        <Rbutton class="ML-auto" bg="var(--C-LG1)" borderStyle="none" round>
          <div class="flex-A-C">
            <Rimage
              size="48rem"
              :src="_require('src/assets/images/icon/jingbi.png')"
            />
            <div>${{ fixedDecimals(item.commission, 2) }}</div>
          </div>
        </Rbutton>
      </Ccard>
    </div>
    <div class="flex-A-C" v-else>
      <BwkLevel :level="props.item.user.level" class="BwkLevel"></BwkLevel>
      <div class="ML-sm">
        <h3>{{ omitText(props.item.user.address) }}</h3>
        <div class="C-T4 MT-xs">
          {{ dayjs(item.created_at).format("YYYY-MM-DD") }}
        </div>
      </div>
      <Rbutton class="ML-auto" bg="var(--C-LG1)" borderStyle="none" round>
        <div class="flex-A-C">
          <Rimage
            size="48rem"
            :src="_require('src/assets/images/icon/jingbi.png')"
          />
          <div>${{ fixedDecimals(item.commission, 2) }}</div>
        </div>
      </Rbutton>
    </div>
  </Ccard>
</template>
<style lang="scss" scoped>
$size: 120rem;
.list-item {
  position: relative;
  $offsetTop: calc($size / 2 + var(--gap-sm));
  margin-top: $offsetTop;
  padding-top: $offsetTop;
  .BwkLevel {
    position: absolute;
    top: 0;
    transform: translateY(-50%) translateX(calc(0rem - var(--gap-sm)));
  }
}
</style>
